<template>
  <!--首页部分-->
  <div class="Con">
    <div class="Con-1">
      <div class="C_item">
        <img src="../assets/img/Teacher-RegFrom.jpg" />
        <span>教师注册</span>
      </div>

      <div class="C_item">
        <img src="../assets/img/Teacher-Login.jpg" />
        <span>教师登录</span>
      </div>

      <div class="C_item">
        <img src="../assets/img/ShowCourse.jpg" />
        <span>当天课程屏幕</span>
      </div>

      <div class="C_item">
        <img src="../assets/img/ShowWeekCourse.jpg" />
        <span>实验室课表</span>
      </div>
    </div>

    <div class="Con-2">
      <div class="Con-2-H">
        <div class="C2_item">
          <img src="../assets/img/102.jpg" />
          <span>102</span>
        </div>

        <div class="C2_item">
          <img src="../assets/img/203.jpg" />
          <span>203</span>
        </div>

        <div class="C2_item">
          <img src="../assets/img/301.jpg" />
          <span>301</span>
        </div>

        <div class="C2_item">
          <img src="../assets/img/304.jpg" />
          <span>304</span>
        </div>

        <div class="C2_item">
          <img src="../assets/img/401.jpg" />
          <span>401</span>
        </div>
      </div>
      <div class="Con-2-H">
        <div class="C2_item">
          <img src="../assets/img/403.jpg" />
          <span>403</span>
        </div>

        <div class="C2_item">
          <img src="../assets/img/404.jpg" />
          <span>404</span>
        </div>

        <div class="C2_item">
          <img src="../assets/img/501.png" />
          <span>501</span>
        </div>

        <div class="C2_item">
          <img src="../assets/img/503.jpg" />
          <span>503</span>
        </div>

        <div class="C2_item">
          <img src="../assets/img/504.jpg" />
          <span>504</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.Con {
  width: 99%;
  height: 98%;
  margin: auto;
  margin-top: 1%;
  border: 2px solid rgb(184, 182, 182);
  min-width: 1100px;
  max-width: 1600px;
  overflow: auto;
  min-height: 800px;
  max-height: 1200px;
}
.Con-1 {
  width: 100%;
  height: 40%;

  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: auto;
}
.C_item {
  width: 200px;
  height: 250px;
  box-shadow: 1px 1px 5px rgb(117, 117, 117);
  text-align: center;
  background-color: rgb(242, 242, 243);
}
.C_item:hover {
  box-shadow: 1px 1px 10px rgb(71, 71, 71);
}
.C_item img {
  width: 200px;
  height: 200px;
  border-bottom: 1px solid rgb(199, 198, 198);
}
.C_item span {
  padding: 0px;
  margin: 0px;
  width: 250px;
  height: 50px;
  padding-top: 3px;
  font-size: 16px;
  font-family: "宋体";
  font-weight: 700;
  color: rgb(94, 93, 92);
}
.Con-2 {
  border-top: 1px solid rgb(187, 187, 187);
  width: 100%;
  height: 59%;
}
.Con-2-H {
  width: 100%;
  height: 50%;

  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
.C2_item {
  width: 180px;
  height: 210px;
  background-color: rgb(242, 242, 243);
  box-shadow: 1px 1px 5px rgb(117, 117, 117);
}
.C2_item:hover {
  box-shadow: 1px 1px 10px rgb(88, 88, 88);
}
.C2_item img {
  width: 180px;
  height: 180px;
  border-bottom: 1px solid rgb(199, 198, 198);
}
.C2_item span {
  font-size: 14px;
  font-family: "宋体";
  font-weight: 700;
  color: rgb(105, 103, 103);
}
</style>
